<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <!-- Title and other stuffs -->
  <title>Pricing - Colors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>

  <!-- Stylesheets -->
  <link href="style/bootstrap.css" rel="stylesheet">
  <!-- Font awesome icon -->
  <link rel="stylesheet" href="style/font-awesome.css">
  <!-- Flexslider -->
  <link rel="stylesheet" href="style/flexslider.css">  
  <!-- prettyPhoto -->
  <link rel="stylesheet" href="style/prettyPhoto.css">
  <!-- Main stylesheet -->
  <link href="style/style.css" rel="stylesheet">

  <!-- Bootstrap responsive -->
  <link href="style/bootstrap-responsive.css" rel="stylesheet">
  
  <!-- HTML5 Support for IE -->
  <!--[if lt IE 9]>
  <script src="js/html5shim.js"></script>
  <![endif]-->

  <!-- Favicon -->
  <link rel="shortcut icon" href="img/favicon/favicon.png">
</head>

<body>

<!-- Navbar starts -->

  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div class="nav-collapse collapse">
          <ul class="nav pull-right">
            <li><a href="login.html">Login</a></li>
            <li><a href="register.html">Register</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <b class="caret"></b></a>
              <ul class="dropdown-menu">
                          <li><a href="contactus.html">Contact Us</a></li>
                          <li><a href="login.html">Logout</a></li>
             </ul>
            </li> 

             
          </ul>
        </div>
      </div>
    </div>
  </div>

<!-- Navbar ends -->


<!-- Sliding box starts -->
   <div class="slide-box">
      <div class="bor"></div>
      <div class="padd">
        <div class="slide-box-button">
          <i class="icon-chevron-left"></i>
        </div>
        <h5>Welcome</h5>
        Lorem ipsum dolor sit amet, constur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

        <hr />

        <div class="social">
          <a href="#"><i class="icon-facebook facebook"></i></a>
          <a href="#"><i class="icon-twitter twitter"></i></a>
          <a href="#"><i class="icon-linkedin linkedin"></i></a>
          <a href="#"><i class="icon-google-plus google-plus"></i></a>
          <a href="#"><i class="icon-pinterest pinterest"></i></a>
        </div>
      
      </div>
    </div>

<!-- Sliding box ends -->    

<!-- Main content starts -->

<div class="content">

  <!-- Sidebar starts -->
  <div class="sidebar">

    <!-- Logo -->
    <div class="logo">
      <a href="#"><img src="img/b-logo.png" alt="" /></a>
    </div>



        <div class="sidebar-dropdown"><a href="#">Navigation</a></div>

        <!--- Sidebar navigation -->
        <!-- If the main navigation has sub navigation, then add the class "has_sub" to "li" of main navigation. -->

        <!-- Colors: Add the class "br-red" or "br-blue" or "br-green" or "br-orange" or "br-purple" or "br-yellow" to anchor tags to create colorful left border -->
        <div class="s-content">

          <ul id="nav">
            <!-- Main menu with font awesome icon -->
            <li><a href="index.html" class="open br-red"><i class="icon-home"></i> Home</a>
              <!-- Sub menu markup 
              <ul>
                <li><a href="#">Submenu #1</a></li>
                <li><a href="#">Submenu #2</a></li>
                <li><a href="#">Submenu #3</a></li>
              </ul>-->
            </li>

            <li class="has_sub"><a href="#" class="br-green"><i class="icon-list-alt"></i> Pages <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
              <ul>
                <li><a href="pricing.html">Pricing Table</a></li>
                <li><a href="404.html">404</a></li>
                <li><a href="gallery.html">Gallery</a></li> 
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="sitemap.html">Sitemap</a></li>
                <li><a href="login.html">Login</a></li>
                <li><a href="register.html">Register</a></li>
              </ul>
            </li>              

            <li class="has_sub"><a href="#" class="br-orange"><i class="icon-comments"></i> Blog  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
              <ul>
                <li><a href="blog1.html">Blog #1</a></li>
                <li><a href="blog2.html">Blog #2</a></li>
                <li><a href="blog-single.html">Blog Single</a></li>
              </ul>
            </li> 

            <li><a href="aboutus.html" class="br-blue"><i class="icon-user"></i> About Us</a></li>
            <li><a href="contactus.html" class="br-yellow"><i class="icon-envelope-alt"></i> Contact Us</a></li>
          </ul>
            

            <!-- Sidebar search -->
    

            <form class="form-search">
              <div class="input-append">
                <input type="text" class="input-small search-query">
                <button type="submit" class="btn btn-danger">Search</button>
              </div>
            </form>
            
            <!-- Sidebar widget -->
            
            <div class="s-widget">
               <h6>Sidebar Widget</h6>
               <p>Maecenas sit amet ipsum ac ipsum consequat fringilla. Curabitur rutrum dignissim convallis. Cras venenatis rhoncus orci, mattis interdum dui porta sit amet. </p>
            </div>

        </div>



  </div>
  <!-- Sidebar ends -->

  <!-- Mainbar starts -->
  <div class="mainbar">

    <div class="matter">
      <div class="container-fluid">

        <!-- Title starts -->
        <div class="page-title">
          <h2>Pricing Table<span>Something Goes Here</span></h2>
        </div>
        <!-- Title ends -->

        <!-- Content starts -->

        <div class="box-body">
          
                     <!-- Pricing table -->                     
                     <!-- Price details. Note down the class name before you edit. -->
                     <div class="row-fluid">
                     
                        <div class="span3">
                        
                           
                           <!-- Pricing table #1. -->
                           <div class="pricel center">
                                 <div class="phead-top b-red">
                                    <!-- Title -->
                                    <h4>Starter</h4>
                                 </div>
                                 <div class="phead-bottom">
                                    <!-- Price. Use the syntax correctly. -->
                                    <p><span class="pst">$</span> 4.99 <span class="psb">/m</span></p>
                                 </div>
                                 <div class="arrow-down"></div>
                              <div class="plist">
                                 <!-- List -->
                                 <ul>
                                    <li>1 GB Disk Space</li>
                                    <li>10 GB Data Transfer</li>
                                    <li>Single Domain</li>
                                    <li>10 Email Ids</li>
                                    <li>Top Notch Support</li>
                                    <li>Instant Activation</li>
                                 </ul>
                              </div>

                              <div class="pbutton">  
                                 <!-- button -->
                                 <a href="#" class="btn"><i class="icon-shopping-cart"></i> Buy Now</a>
                              </div>
                              
                           </div>
                        </div>


                        <div class="span3">
                        
                           
                           <!-- Pricing table #2. -->
                           <div class="pricel center">
                                 <div class="phead-top b-blue">
                                    <!-- Title -->
                                    <h4>Small Business</h4>
                                 </div>
                                 <div class="phead-bottom">
                                    <!-- Price. Use the syntax correctly. -->
                                    <p><span class="pst">$</span> 8.99 <span class="psb">/m</span></p>
                                 </div>
                                 <div class="arrow-down"></div>
                              <div class="plist">
                                 <!-- List -->
                                 <ul>
                                    <li>1 GB Disk Space</li>
                                    <li>10 GB Data Transfer</li>
                                    <li>Single Domain</li>
                                    <li>10 Email Ids</li>
                                    <li>Top Notch Support</li>
                                    <li>Instant Activation</li>
                                 </ul>
                              </div>

                              <div class="pbutton">  
                                 <!-- button -->
                                 <a href="#" class="btn"><i class="icon-shopping-cart"></i> Buy Now</a>
                              </div>
                              
                           </div>
                        </div>


                        <div class="span3">
                        
                           
                           <!-- Pricing table #3. -->
                           <div class="pricel center">
                                 <div class="phead-top b-green">
                                    <!-- Title -->
                                    <h4>Business</h4>
                                 </div>
                                 <div class="phead-bottom">
                                    <!-- Price. Use the syntax correctly. -->
                                    <p><span class="pst">$</span> 12.99 <span class="psb">/m</span></p>
                                 </div>
                                 <div class="arrow-down"></div>
                              <div class="plist">
                                 <!-- List -->
                                 <ul>
                                    <li>1 GB Disk Space</li>
                                    <li>10 GB Data Transfer</li>
                                    <li>Single Domain</li>
                                    <li>10 Email Ids</li>
                                    <li>Top Notch Support</li>
                                    <li>Instant Activation</li>
                                 </ul>
                              </div>

                              <div class="pbutton">  
                                 <!-- button -->
                                 <a href="#" class="btn"><i class="icon-shopping-cart"></i> Buy Now</a>
                              </div>
                              
                           </div>
                        </div>


                        <div class="span3">
                        
                           
                           <!-- Pricing table #4. -->
                           <div class="pricel center">
                                 <div class="phead-top b-purple">
                                    <!-- Title -->
                                    <h4>Enterprice</h4>
                                 </div>
                                 <div class="phead-bottom">
                                    <!-- Price. Use the syntax correctly. -->
                                    <p><span class="pst">$</span> 16.99 <span class="psb">/m</span></p>
                                 </div>
                                 <div class="arrow-down"></div>
                              <div class="plist">
                                 <!-- List -->
                                 <ul>
                                    <li>1 GB Disk Space</li>
                                    <li>10 GB Data Transfer</li>
                                    <li>Single Domain</li>
                                    <li>10 Email Ids</li>
                                    <li>Top Notch Support</li>
                                    <li>Instant Activation</li>
                                 </ul>
                              </div>

                              <div class="pbutton">  
                                 <!-- button -->
                                 <a href="#" class="btn"><i class="icon-shopping-cart"></i> Buy Now</a>
                              </div>
                              
                           </div>
                        </div>                                                                        

                          
                     </div>

        </div>

        <!-- Content ends -->

      </div>
    </div>
                     

  </div>
  <!-- Mainbar ends -->
<div class="clearfix"></div>
  <!-- Foot starts -->             
    <div class="foot">
	  <div class="bor"></div>
      <div class="container-fluid">
        <div class="row-fluid">
          
            <div class="span4">
              <div class="fwidget">

                <div class="col-l">
                  <h6>Downlaods</h6>
                  <ul>
                    <li><a href="#">Condimentum</a></li>
                    <li><a href="#">Etiam at</a></li>
                    <li><a href="#">Fusce vel</a></li>
                    <li><a href="#">Vivamus</a></li>
                    <li><a href="#">Pellentesque</a></li>
                  </ul>
                </div>

                <div class="col-r">
                  <h6>Support</h6>
                  <ul>
                    <li><a href="#">Condimentum</a></li>
                    <li><a href="#">Etiam at</a></li>
                    <li><a href="#">Fusce vel</a></li>
                    <li><a href="#">Vivamus</a></li>
                    <li><a href="#">Pellentesque</a></li>
                  </ul>
                </div>
				
				<div class="clearfix"></div>

              </div>
            </div>

            <div class="span4">
              <div class="fwidget">
                <h6>Categories</h6>
                <ul>
                  <li><a href="#">Condimentum - Condimentum gravida</a></li>
                  <li><a href="#">Etiam at - Condimentum gravida</a></li>
                  <li><a href="#">Fusce vel - Condimentum gravida</a></li>
                  <li><a href="#">Vivamus - Condimentum gravida</a></li>
                  <li><a href="#">Pellentesque - Condimentum gravida</a></li>
                </ul>
              </div>
            </div>

            <div class="span4">
              <div class="fwidget">
                <h6>Recent Posts</h6>
                <ul>
                  <li><a href="#">Sed eu leo orci, condimentum gravida metus</a></li>
                  <li><a href="#">Etiam at nulla ipsum, in rhoncus purus</a></li>
                  <li><a href="#">Fusce vel magna faucibus felis dapibus facilisis</a></li>
                  <li><a href="#">Vivamus scelerisque dui in massa</a></li>
                  <li><a href="#">Pellentesque eget adipiscing dui semper</a></li>
                </ul>
              </div>
            </div>

        </div>
		
		<div class="row-fluid">
			<div class="span12">
				<hr class="visible-desktop">
				<div class="copy">Copyright 2012 &copy; - <a href="#">Your Site</a> - Designed by <a href="http://responsivewebinc.com/bootstrap-themes">Bootstrap Themes</a></div>
			</div>
		</div>
		
      </div>
    </div> 
  <!-- Foot ends -->

</div>

<div class="clearfix"></div>

<!-- Main content ends -->


<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span> 

<!-- JS -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script> <!-- Bootstrap -->
<script src="js/imageloaded.js"></script> <!-- Imageloaded -->
<script src="js/jquery.isotope.js"></script> <!-- Isotope -->
<script src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto -->
<script src="js/jquery.flexslider-min.js"></script> <!-- Flexslider -->
<script src="js/custom.js"></script> <!-- Main js file -->
</body>
</html>